<template>
  <ul class="topNav">
    <li>
      <router-link to="/recommend">推荐音乐</router-link>
    </li>
    <li>
      <router-link to="/hot">热歌榜</router-link>
    </li>
    <li>
      <router-link to="/search">搜索</router-link>
    </li>
  </ul>
</template>

<style lang="less" scoped>
.topNav {
  display: flex;
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: #8ac4d0;
  height: 55px;
  z-index: 9;
  li {
    flex: 1;
    line-height: 64px;
    text-align: center;
    height: 55px;
    a {
      display: inline-block;
      line-height: 35px;
      padding: 0px 5px;
      font-size: 17px;
      color: #fff;
      font-weight: 500;
      &.router-link-exact-active {
        color: white;
        position: relative;
        font-size: 18px;
        font-weight: 550;
        letter-spacing: 1px;
        &::after {
          content: "";
          width: 100%;
          height: 4px;
          background-color: #f4d160;
          position: absolute;
          left: 0px;
          bottom: -7px;
          border-radius: 50px;
        }
      }
    }
  }
}
</style>
